<template>
  <!-- 折线图容器 -->
  <div class="echart" ref="mychart1" id="mychart1" :style="{
    width: '100%',
    height: '100px',
    marginBottom: '5px',
    border: '1px solid #efefef',
    borderRadius: '5px',
  }"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'LineIndex',
  data() {
    return {
      mycharts: [],
    }
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      let mychart1 = echarts.init(this.$refs.mychart1);
      let option1 = {
        // title: {
        //   text: "访问量",
        //   left: "center",
        // },
        tooltip: {
          show: true,
          trigger: "axis", // 触发类型
          axisPointer: {
            type: "cross", // 坐标轴指示器类型，直线指示器
            crossStyle: {
              color: "#999"
            }
          }
        },
        // legend: {
        //   orient: "vertical", //垂直显示
        //   left: "left",
        //   data: ["销售额", "访问量", "订单量"],
        // },
        // toolbox: {
        //   // feature: {
        //   //   saveAsImage: {},
        //   // },
        // },
        xAxis: {
          type: 'category',
          boundaryGap: true, // 坐标轴两边留白策略
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
          show: false
        },
        series: [
          {
            name: '访问量',
            type: 'line',
            data: [10, 7, 33, 12, 48, 9, 29, 10, 44],
            // 拐点的样式的设置
            itemStyle: {
              opacity: 0
            },
            // 线条的样式
            lineStyle: {
              color: 'purple'
            },
            // 填充颜色设置
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'purple' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ],
        grid: {
          left: 5,
          top: 5,
          right: 15,
          bottom: 20,
        },
      };
      mychart1.setOption(option1);
      // this.mycharts.push(mychart1);
      // 随窗口大小改变自适应
      window.onresize = () => {
        mychart1.resize();
      };
    }

  }

}
</script>

<style></style>